<script>
  import request from '../../../utils/request'

  export default {
    name: 'agreement',
    methods: {
      open() {
        return new Promise((resolve, reject) => {
          this.$refs.popup.open()
          this.resolve = resolve
          this.reject = reject
        })
      },
      close() {
        this.$refs.popup.close()
      },
    },
    data() {
      return {
        content: '',
        resolve: null,
        reject: null,
      }
    },
    created() {
      //获取协议内容
      request({
        url: 'sysPam/getSysParam',
        data: {
          pamCode: 'courseTakeOrderAgreement',
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.content = data.pamValue
      })
    },
    props: {
      hasAgreement: Boolean,
    },
    emits: ['update:hasAgreement'],
  }
</script>

<template>
  <uni-popup
    ref="popup"
    type="bottom"
    @change="
      (val) => {
        if (!val.show) {
          if (!hasAgreement) {
            reject()
          }
        }
      }
    "
  >
    <view class="container">
      <view class="header">
        <view class="placeholder"></view>
        <view class="title">用户服务协议</view>
        <view
          class="agree-btn"
          @click="
            () => {
              $emit('update:hasAgreement', true)
              resolve()
              close()
            }
          "
          >同意</view
        >
      </view>
      <view class="content-container">
        <!--        <view v-html="content" class="content"></view>-->
        <rich-text
          :nodes="content"
          class="content"
        ></rich-text>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
  .container {
    height: 70vh;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    .header {
      height: 130rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      justify-content: space-between;
      .placeholder {
        width: 120rpx;
      }
      .title {
        font-size: 36rpx;
        color: var(--text-color);
      }
      .agree-btn {
        width: 120rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--theme-color);
        color: var(--text-color-white);
        font-size: 30rpx;
        border-radius: 35rpx;
      }
    }
    .content-container {
      height: calc(70vh - 130rpx);
      overflow: auto;
      padding: 0 30rpx;
      .content {
        width: 100%;
        padding: {
          top: 30rpx;
          bottom: calc(30rpx + env(safe-area-inset-bottom));
        }
        word-break: break-all;
      }
    }
  }
</style>
